<template>
  <div class="two-page">
    <div class="page-top">
      <div v-for="(item, index) in tab" :key="index" class="page-tab" @click.stop="changeTab(item)">
        <div class="tab-text">{{item.text}}</div>
        <span :class="{'under-line': item.isSelect, 'under-line-width': item.code === 'fwcx', 'under-line-opacity': !item.isSelect}"></span>
      </div>
    </div>
    <div class="xcap-class query-phone" v-show="nowTabCode === 'fwcx'">
      <!-- <div class="search-title">请输入您的手机号</div> -->
      <div class="search-box">
        <input type="phone" v-model="phone" placeholder="请输入您的手机号" />
        <div class="search-class" @click.stop="searchButton">搜索</div>
      </div>
    </div>
    <div v-show="nowTabCode === 'xcap'" class="xcap-class" ref="twoC">
      <div class="hyxc-bg-class">
        <img src="./img/hyxc-bg.jpg" />
      </div>
      <!-- 点位介绍 -->
      <!-- <div class="h5-title"><span>点位介绍</span></div> -->
      <div v-for="(list, index) in dataList" :key="index" class="datalist-class" v-show="nowTabCode === 'xcap'">
        <img :src="list.img" class="list-img" />
        <div @click="callback(list, 'two')" class="list-content">
          <div class="list-title">{{list.title}}</div>
          <div class="list-p-box">
            <span class="list-p">{{list.info}}</span>
          </div>
        </div>
      </div>
    </div>
    <div v-show="nowTabCode === 'wxts'" class="xcap-class" ref="twoC">
      <div class="hyxc-bg-class yb-bg-class">
        <img src="./img/wxfw-bg.jpg" />
      </div>
      <!-- <div class="wxts-content">
        <div class="wxts-p">
          <b>温馨提示：</b>
          <p>据最新气象资料分析：预计现场会期间（2月29日白天），我县县城（夏邛镇）周边及拉哇乡境内以多云天气为主，东北部个别乡镇有分散性阵雪（雨），午后至傍晚有阵性大风，局地瞬时风力可达6～7级；人体舒适度3级（早晚偏冷），紫外线辐射指数3级（中等），着装厚度气象指数：6级（冬装），日平均相对湿度40%。 </p> 
        </div>
      </div> -->
      <!-- <div class="hyxc-bg-class yb-bg-class">
        <img src="./img/fw-bg.jpg" />
      </div> -->
    </div>
    <div class="alert-box" @click.stop="close" v-show="popShow">
      <div class="alert-class">
        <div class="alert-title-class">房间号</div>
        <div class="alert-text-class">{{roomNum}}</div>
        <div class="alert-title-class">车次</div>
        <div class="alert-text-class">{{carNum}}</div>
        <div class="alert-title-class">志愿者联系方式</div>
        <div class="alert-text-class">{{volunteer}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import database from '../utils/database.js';
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      phone: '',
      roomNum: '',
      carNum:'',
      volunteer: '',
      dataList: [],
      popShow: false,
      nowTabCode: 'xcap',
      active: 0,
      tab: [
        {
          text: '点位介绍',
          code: 'xcap',
          isSelect: true,
          dataList: [
            {
              title: '巴塘县拉哇电站点位',
              // img: require('./img/1-two.png'),
              img: 'https://batang-1252933127.cos.ap-chengdu.myqcloud.com/1-two.png',
              info: '拉哇水电站是国家“十四五”重点清洁能源基地—金沙江上游川藏段国家水风光一体化示范基地的重要组成部分，位于巴塘县和西藏芒康县境内，总投资317亿元，装机容量200万千瓦，多年平均发电量90.89亿千瓦时，于2019年1月获得国家发改委核准，2021年11月完成大江截流，计划于2026年底首台机组投产发电。电站建成后，每年可节省标煤282万吨，减少二氧化碳排放685万吨。',
              content: `
              <p>拉哇水电站是国家“十四五”重点清洁能源基地—金沙江上游川藏段国家水风光一体化示范基地的重要组成部分，位于巴塘县和西藏芒康县境内，总投资317亿元，装机容量200万千瓦，多年平均发电量90.89亿千瓦时，于2019年1月获得国家发改委核准，2021年11月完成大江截流，计划于2026年底首台机组投产发电。电站建成后，每年可节省标煤282万吨，减少二氧化碳排放685万吨。</p>
              `,
            },
            {
              title: '巴塘县南戈搬迁点点位',
              // img: require('./img/2-two.png'),
              img: 'https://batang-1252933127.cos.ap-chengdu.myqcloud.com/2-two.png',
              info: '苏哇龙乡南戈村是巴塘县水电移民第一搬迁村，全村农户59户304人，历时60个月搬离库区，实现“住新房、谋新业、换新颜”三级跳。创造出高位推动、政令统一，机制科学、保障有力，领导垂范、干部（党员）担当，党群合心、移民支持的宝贵经验。依托新村地理区位优势，采取“党员先行试点，抱团规模发展”模式，开发天然温泉康养度假民宿集群，实现家门口稳定可持续就业。建成甘孜州首个公益性邻里学堂，规范化打造村史馆，汇聚文化力量，守住文化根脉，筑牢精神之魂。全力打造村庄美、产业兴、治理好、乡风和、群众富、集体强的和美乡村，走出了一条极具藏乡特色的宜居宜业和美乡村发展之路。',
              content: `
              <p>苏哇龙乡南戈村是巴塘县水电移民第一搬迁村，全村农户59户304人，历时60个月搬离库区，实现“住新房、谋新业、换新颜”三级跳。创造出高位推动、政令统一，机制科学、保障有力，领导垂范、干部（党员）担当，党群合心、移民支持的宝贵经验。依托新村地理区位优势，采取“党员先行试点，抱团规模发展”模式，开发天然温泉康养度假民宿集群，实现家门口稳定可持续就业。建成甘孜州首个公益性邻里学堂，规范化打造村史馆，汇聚文化力量，守住文化根脉，筑牢精神之魂。全力打造村庄美、产业兴、治理好、乡风和、群众富、集体强的和美乡村，走出了一条极具藏乡特色的宜居宜业和美乡村发展之路。</p>
              `,
            },
            {
              title: '巴塘县幼儿园点位',
              // img: require('./img/3-two.png'),
              img: 'https://batang-1252933127.cos.ap-chengdu.myqcloud.com/3-two.png',
              info: '2021年9月巴塘县幼儿园建设项目在原址上开工建设，总建筑面积7799平方米，总投资3240万元，其中浙江援建资金1700万元。幼儿园建成后，拥有28个功能完善的教室及附属设施，学位由原来的500个扩大至840个，全面满足周边群众对高质量、高水平普惠性学前教育资源的需求，成为家长放心、学校安心、学生舒心的幼儿园。引进浙江学前教育成熟经验与数字化模式，以数智监管和教育教学两大板块为核心，连通、共享浙江的优质教育资源，成为甘孜州智慧幼儿园标准化样板工程，有力助推了巴塘县打造川滇藏结合部教育高地进程。',
              content: `
              <p>2021年9月巴塘县幼儿园建设项目在原址上开工建设，总建筑面积7799平方米，总投资3240万元，其中浙江援建资金1700万元。幼儿园建成后，拥有28个功能完善的教室及附属设施，学位由原来的500个扩大至840个，全面满足周边群众对高质量、高水平普惠性学前教育资源的需求，成为家长放心、学校安心、学生舒心的幼儿园。引进浙江学前教育成熟经验与数字化模式，以数智监管和教育教学两大板块为核心，连通、共享浙江的优质教育资源，成为甘孜州智慧幼儿园标准化样板工程，有力助推了巴塘县打造川滇藏结合部教育高地进程。</p>
              `,
            },
            {
              title: '巴塘县夏邛镇村级道路建设项目点位',
              // img: require('./img/4-two.png'),
              img: 'https://batang-1252933127.cos.ap-chengdu.myqcloud.com/4-two.png',
              info: '该项目总投资3084万元，改造铺装道路长700余米，资金来源双流对口援建资金，项目的实施是连接体育馆、社会集群发展中心和多重业态布局，推动川滇藏青年文化创业街区建设，改善城乡结合部互联互通和经济发展环境，促进城乡产业融合均衡发展，缩小城乡差距的需要。是学习运用浙江“千万工程”经验，提升城镇综合承载能力，推进宜居宜业和美乡村建设，构筑更高水平城乡融合发展格局的样板工程。',
              content: `
              <p>该项目总投资3084万元，改造铺装道路长700余米，资金来源双流对口援建资金，项目的实施是连接体育馆、社会集群发展中心和多重业态布局，推动川滇藏青年文化创业街区建设，改善城乡结合部互联互通和经济发展环境，促进城乡产业融合均衡发展，缩小城乡差距的需要。是学习运用浙江“千万工程”经验，提升城镇综合承载能力，推进宜居宜业和美乡村建设，构筑更高水平城乡融合发展格局的样板工程。</p>
              `,
            },
            {
              title: '甘孜州川滇藏结合部中心体育馆点位',
              // img: require('./img/5-two.png'),
              img: 'https://batang-1252933127.cos.ap-chengdu.myqcloud.com/5-two.png',
              info: '该项目总投资6520万元，由中央预算内资金、浙江对口援建资金构成，总建筑面积为10653平方米，可容纳3000余名观众，拥有60个停车位。是集教学训练、体育比赛、大型集会、全民健身功能为一体的体育馆。项目建设是我县高位推进川滇藏三省结合部体育高地的重要举措，更是关注、改善民生，提高人民生活水平的现实行动。体育馆的建成补齐了区域体育功能不完善的短板，为推动全州体育事业的蓬勃发展注入了新活力，成为川滇藏三省结合部的新地标。',
              content: `
              <p>该项目总投资6520万元，由中央预算内资金、浙江对口援建资金构成，总建筑面积为10653平方米，可容纳3000余名观众，拥有60个停车位。是集教学训练、体育比赛、大型集会、全民健身功能为一体的体育馆。项目建设是我县高位推进川滇藏三省结合部体育高地的重要举措，更是关注、改善民生，提高人民生活水平的现实行动。体育馆的建成补齐了区域体育功能不完善的短板，为推动全州体育事业的蓬勃发展注入了新活力，成为川滇藏三省结合部的新地标。</p>
              `,
            },
          ]
        }
        ,
        {
          text: '服务查询',
          code: 'fwcx',
          isSelect: false
        }
        ,
         {
          text: '温馨提示',
          code: 'wxts',
          isSelect: false
        }
      ],
      phoneList: database,
      // phoneList: [
      //   {
      //     phoneNum: '13990453198',
      //     roomNum: '鹏城迎宾大酒店 5002',
      //     carNum: '一号车',
      //     volunteer: '王娟 18111319897'
      //   }
      // ]
    }
  },
  created() {
    this.dataList = this.tab[0].dataList;
  },
  methods: {
    callback(data, type) {
      this.$emit('callback', data, type);
    },
    changeTab(item) {
      this.tab.forEach(tabObj => {
        if (tabObj.text === item.text) {
          tabObj.isSelect = true;
          this.nowTabCode = item.code;
        } else {
          tabObj.isSelect = false;
        }
      });
      this.dataList = item.dataList;
      window.scrollTo({top: 0, left: 0});
    },
    searchButton() {
      console.log(this.phone);
      if (!this.phone) {
        alert('请输入手机号后再查询！');
        return;
      }
      this.roomNum = ''
      this.phoneList.forEach(item => {
        if (this.phone === item.phone) {
          this.roomNum = item.hotel;
          this.carNum = item.car;
          this.volunteer = item.contact;
          this.popShow = true;
        }
      });
      if(this.roomNum === '') {
        alert('当前手机号未查询到相关行程信息，请您联系工作人员核对信息后再查询。');
      }
    },
    close() {
      this.popShow = false;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.two-page {
  background-color: #fff;
  height: calc(100vh - 50px);
}
.page-top {
  height: 16vh;
  width: 100vw;
  display: flex;
  flex-direction: row;
  background: url('./img/page2-bg.jpg') no-repeat 0 0;
  background-size: 100%;
  position: fixed;
  top: 0;
}
.page-tab {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  align-items: center;
  justify-content: flex-end;
  color: #fff;
  font-weight: 500;
  margin-bottom: 2vh;
}
.under-line {
  width: 80%;
  border-top: 3px solid #fff;
  margin-top: 0.5vh;
  border-radius: 10px;
}
.under-line-opacity {
  width: 80%;
  border-top: 3px solid rgba(0, 0, 0, 0);
  margin-top: 0.5vh;
}
.under-line-width {
  width: 100%;
}
.search-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 30vh;
}
input {
  height: 50px;
  width: 200px;
  border: 1px solid #333;
  border-radius: 8px;
}
.search-class {
  background: #3b99fc;
  color: #fff;
  font-size: 20px;
  margin-left: 10px;
  padding: 10px 15px 12px;
  border-radius: 8px;
}
.search-title {
  font-size: 20px;
  color: #333;
  font-weight: 500;
  margin-bottom: 20px;
  width: 70%;
  text-align: left;
}
.xcap-class {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  margin: 0 auto;
  margin-top: 15vh;
  padding-bottom: 22vh;
  width: 90%;
}
.wxts-content {
  width: 100%;
  font-size: 12px;
  text-indent: 25px;
  text-align: justify;
  line-height: 20px;
  margin-bottom: 1vh;
}
.p-margin {
  margin: 0.2vh 0;
}
.hyxc-bg-class img {
  width: 100%;
  height: auto;
}
.query-phone {
  height: 100%;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  margin-top: 0%;
  padding-bottom: 0;
}
.alert-box {
  height: 100vh;
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .1);
}
.alert-class {
  height: 40%;
  width: 80%;
  /* position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto; */
  background: rgb(80, 164, 185);
  border-radius: 10px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.alert-title-class {
  font-size: 16px;
  font-weight: 500;
  width: 70%;
  text-align: left;
  margin-bottom: 1vh;
}
.alert-text-class {
  border: 2px solid #fff;
  padding: 5px;
  min-width: 150px;
  margin-bottom: 2vh;
  padding: 5px;
}
.datalist-class {
  display: flex;
  flex-direction: row;
  margin: 30px 20px 10px 30px;
}
.list-img {
  height: auto;
  width: 100px;
  object-fit: cover;
  object-position: 50% 50%;
}
.list-content {

}
.list-title {
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  margin-left: 14px;
}
.list-p-box {
  border: 2px solid rgb(75, 127, 192);
  margin-left: 10px;
  padding: 5px;
  margin-top: 16px;
  border-radius: 5px;
}
.list-p {
  font-size: 10px;
  font-weight: 400;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  text-indent: 20px;
  text-align: left;
  line-height: 15px;
}

.h5-datalist-class {
  display: flex;
  flex-direction: column;
}
.h5-title {
  border-bottom: 2px solid rgb(75, 127, 192);
  font-size: 20px;
  font-weight: 500;
  margin-top: 20px;
  padding: 4px 4px 5px 4px;
  width: auto;
  line-height: normal;
  height: 35px;
}
.h5-title span {
  height: 20px;
  padding: 0px 20px 3px 20px;
  background: rgb(65, 100, 161);
  color: #fff;
}
.h5-list-content {
  width: 90%;
  font-size: 12px;
  text-indent: 25px;
  margin: 0px auto;
  text-align: justify;
  line-height: 20px;
}
.h5-img-data {
  display: flex;
  flex-direction: column;
}
.img-data-pic {
  height: 200px;
  width: 90%;
  margin: 0 auto;
}
.img-data-p {
  font-size: 8px;
  width: 90%;
  margin: 0 auto;
  margin-bottom: 10px;
}
</style>
